<template>
	<view>
		<z-paging ref="paging" @pageScroll="pageScroll" :refresher-enabled="false">
			<v-headerview actionBarColor="#ffffff" :showBackIcon="true" titleColor="#000" pageTitle="幸运转盘">
				<view class="" style="height: 172rpx;"></view>
				<view class="lunpan_bg_box"
					style="background-image: url('https://image.dingxians.cn/image/2025-09-18/150932398.png');">
					<view class="zhizhen_box"
						style="background-image: url('https://image.dingxians.cn/image/2025-09-18/150150885.png');">
					</view>
					<view :animation="animationData" class="canvas-content" id="zhuanpano" style="">
						<view class="canvas-line">
							<view class="canvas-litem" v-for="(item, index) in list" :key="index"
								:style="{ transform: 'rotate(' + (index * width + width / 2) + 'deg)' }"></view>
						</view>
						<view class="canvas-list">
							<view class="canvas-item"
								:style="{ transform: 'rotate(' + (index * width) + 'deg)', zIndex: index, }"
								v-for="(iteml, index) in list" :key="index">
								<view class="canvas-item-text" :style="'transform:rotate(' + (index) + ')'">
									<image :src="iteml.img" />
									<text class="b">{{ iteml.name }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="sty" style="height: 700rpx;"></view>
					<view class="submit_box" @click="submit">开始抽奖</view>
					<view class="shengyu_box">剩余积分：<text style="font-size: 30rpx;color: #f64b43;font-weight: 700;">{{
                        userInfo.integral * 1 }}</text></view>
				</view>

				<!-- 中奖弹窗 -->
				<uni-popup ref="luckyShow" @close="closeLuck" @open="open" type="center" bgColor="transparent"
					:mask-click="false">
					<view @touchmove.stop.prevent="prevent" class="big_bg_box"
						style="background-image: url('https://image.dingxians.cn/image/2025-09-18/150129573.jpg');">
						<view class="jiangpin_box">
							<view class="jp_pic_box">
								<image :src="zjObj.goods_image" mode="widthFix" />
							</view>
							<view class="jp_name_box">{{ zjObj.goods_name }}</view>
						</view>
						<view class="kxsx_box" @click="closeLuck">
							<image src="https://image.dingxians.cn/image/2025-09-18/150130054.png" />
						</view>

					</view>
				</uni-popup>
				<!-- 抽奖记录 -->
				<view class="history-section">
					<view class="history-title">
						<i class="fa fa-history"></i>
						<text>最近中奖记录</text>
					</view>
					<view class="history-list">
						<view class="history-item" v-for="(record, index) in drawHistory" :key="index">
							<text class="history-user">用户{{ record.mobile }}</text>
							<text class="history-prize">获得了 {{ record.goods_name }}</text>
							<text class="history-time">{{ record.created_at }}</text>
						</view>
						<view class="no-history" v-if="drawHistory.length === 0">
							暂无抽奖记录
						</view>
					</view>
				</view>
			</v-headerview>
		</z-paging>
	</view>

</template>

<script>
	export default {
		components: {},
		data() {
			return {
				drawHistory: [{
						user: "17609104094",
						prize: "50元代金券",
						time: "10:23"
					},
					{
						user: "李女士",
						prize: "免费小吃",
						time: "昨天 18:45"
					},
					{
						user: "王先生",
						prize: "谢谢参与",
						time: "昨天 15:30"
					},
					{
						user: "张先生",
						prize: "50元代金券",
						time: "10:23"
					},
					{
						user: "李女士",
						prize: "免费小吃",
						time: "昨天 18:45"
					},
					{
						user: "王先生",
						prize: "谢谢参与",
						time: "昨天 15:30"
					},
					{
						user: "张先生",
						prize: "50元代金券",
						time: "10:23"
					},
					{
						user: "李女士",
						prize: "免费小吃",
						time: "昨天 18:45"
					},
					{
						user: "王先生",
						prize: "谢谢参与",
						time: "昨天 15:30"
					},
					{
						user: "张先生",
						prize: "50元代金券",
						time: "10:23"
					},
					{
						user: "李女士",
						prize: "免费小吃",
						time: "昨天 18:45"
					},
					{
						user: "王先生",
						prize: "谢谢参与",
						time: "昨天 15:30"
					},
					{
						user: "张先生",
						prize: "50元代金券",
						time: "10:23"
					},
					{
						user: "李女士",
						prize: "免费小吃",
						time: "昨天 18:45"
					},
					{
						user: "王先生",
						prize: "谢谢参与",
						time: "昨天 15:30"
					},
				],
				list: [{
						"name": "谢谢惠顾",
						"value": "谢谢惠顾",
						img: 'https://image.dingxians.cn/image/2025-09-15/171180152.jpg',
					},
					{
						"name": "虎元素*10",
						"value": "虎元素*10",
						img: 'https://image.dingxians.cn/image/2025-09-15/171180152.jpg',
					},
					{
						"name": "盲盒*1",
						"value": "盲盒*1",
						img: 'https://image.dingxians.cn/image/2025-09-15/171180152.jpg',
					},
					{
						"name": "谢谢惠顾",
						"value": "谢谢惠顾",
						img: 'https://image.dingxians.cn/image/2025-09-15/171180152.jpg',
					},
					{
						"name": "毛血旺",
						"value": "毛血旺*1",
						img: 'https://image.dingxians.cn/image/2025-09-15/171180152.jpg',
					},
					{
						"name": "谢谢惠顾",
						"value": "谢谢惠顾",
						img: 'https://image.dingxians.cn/image/2025-09-15/171180152.jpg',
					},
					{
						"name": "虎元素",
						"value": "虎元素",
						img: 'https://image.dingxians.cn/image/2025-09-15/171180152.jpg',
					},
					{
						"name": "毛血旺",
						"value": "毛血旺*1",
						img: 'https://image.dingxians.cn/image/2025-09-15/171180152.jpg',
					}
				],
				luckyObj: {}, //奖品
				width: 0,
				animationData: {},
				btnDisabled: '',
				flag: true, //防抖
				zjObj: {},
				userInfo: {}

			};
		},

		onLoad() {
			// 获取奖品列表
			this.width = 360 / this.list.length
		},
		onShow() {
			this.getList()
			this.getReward()
			this.getInfo()
		},
		methods: {
			animation(index, duration) {
				//中奖index
				var list = this.list;
				// var awardIndex = 1 || Math.round(Math.random() * (awardsNum.length - 1)); //随机数
				var runNum = 4; //旋转8周

				// 旋转角度
				this.runDeg = this.runDeg || 0;
				this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - index * (360 / list.length)) + 1
				//创建动画
				var animationRun = uni.createAnimation({
					duration: duration,
					timingFunction: 'ease'
				})
				animationRun.rotate(this.runDeg).step();
				this.animationData = animationRun.export();
				this.btnDisabled = 'disabled';
			},
			submit() {
				console.log(123123123)
				if (this.flag) {
					this.$Request.post(this.$api.index.ordersPrizeWheel).then(res => {
						const index = this.list.findIndex(item => item.id === res.data.goods_id);
						console.log(index, '中将索引')
						this.flag = false
						let duration = 4000
						this.animation(index, duration)
						this.zjObj = res.data
						setTimeout(() => {
							this.$refs.luckyShow.open()
							this.getInfo()
							this.getReward()
						}, 4000)
					})
				}
			},
			getReward() {
				let data = {
					page: 1,
					limit: 100,
					type: 2
				}
				this.$Request.post(this.$api.index.ordersIntegralExchangeRecord, data).then(res => {
					res.data.data.forEach((item) => {
						item.mobile = item.order_mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
					})
					console.log(res.data.data)
					this.drawHistory = res.data.data
				})
			},
			closeLuck() {
				this.$refs.luckyShow.close()
				this.flag = true
			},
			getList() {
				let data = {
					goods_cate_id: 2
				}
				this.$Request.get(this.$api.index.goods, data).then(res => {
					res.data.data.forEach(item => {
						item.img = item.image
						item.name = item.title
						item.value = item.title

					});
					this.list = res.data.data
				})
			},
			getInfo() {
				this.$Request.get(this.$api.user.users).then(res => {
					this.userInfo = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.zp-scroll-view-absolute {
		background-image: none !important;
		background-color: #f1f1f1 !important;
		position: relative !important;
	}

	.lunpan_bg_box {
		width: 600rpx;
		height: 600rpx;
		position: relative;
		margin: auto;
		margin-bottom: 230rpx;
		background-size: 100% 100%;

		.zhizhen_box {
			width: 140rpx;
			height: 325rpx;
			background-size: 100% 100%;
			position: absolute;
			top: 45rpx;
			left: 0;
			right: 0;
			margin: auto;
		}




		.canvas-content {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			display: block;
			width: 600rpx;
			height: 600rpx;
			border-radius: inherit;
			/* background-clip: padding-box; */
			/* background-color: #ffcb3f; */
		}

		.canvas-list {
			position: absolute;
			left: 0;
			top: 0;
			width: inherit;
			height: inherit;
			z-index: 9999;
		}

		.canvas-item {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			color: #e4370e;
			// background-color: pink;
			// text-shadow: 0 1rpx 1rpx rgba(255, 255, 255, 0.6);
		}

		.canvas-item-text {
			position: relative;
			display: block;
			padding-top: 68rpx;
			margin: 0 auto;
			text-align: center;
			-webkit-transform-origin: 50% 300rpx;
			transform-origin: 50% 300rpx;
			display: flex;
			// overflow: hidden;
			flex-direction: column;
			align-items: center;
			color: #FB778B;
		}

		.canvas-item-text text {
			height: 19rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #F6F4FF;
			line-height: 18rpx;
		}

		.canvas-item-text image {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 17rpx;
		}


		/* 分隔线 */
		.canvas-line {
			position: absolute;
			left: 0;
			top: 0;
			width: inherit;
			height: inherit;
			z-index: 99;
		}

		.canvas-litem {
			position: absolute;
			left: 300rpx;
			top: 0;
			width: 3rpx;
			height: 230rpx;
			background-color: #000000;
			opacity: .6;
			overflow: hidden;
			-webkit-transform-origin: 50% 300rpx;
			transform-origin: 50% 300rpx;
		}


	}

	.submit_box {
		width: 300rpx;
		height: 80rpx;
		background-color: #f64b43;
		border-radius: 30rpx;
		text-align: center;
		line-height: 80rpx;
		margin: auto;
		margin-bottom: 10rpx;
		z-index: 10;
	}

	.shengyu_box {
		width: 100%;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;

		margin-bottom: 50rpx;

	}



	// 弹窗
	.big_bg_box {
		width: 520rpx;
		height: 628rpx;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding-top: 156rpx;

		.jiangpin_box {
			width: 300rpx;
			height: 300rpx;
			// background: #051341;
			border-radius: 10rpx;
			// opacity: 0.5;
			margin: auto;
			margin-bottom: 30rpx;
			box-sizing: border-box;
			padding-top: 31rpx;

			.jp_pic_box {
				margin: auto;
				margin-bottom: 39rpx;
				width: 143rpx;
				height: 161rpx;

				image {
					width: 143rpx;
					height: 161rpx;
				}
			}

			.jp_name_box {
				width: 100%;
				height: 23rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #fff;
				line-height: 23rpx;
				text-align: center;
			}
		}

		.kxsx_box {
			width: 300rpx;
			height: 97rpx;
			margin: auto;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}



	/* 抽奖历史 */
	.history-section {
		width: 100%;
		background-color: white;
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
	}

	.history-title {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.history-title .fa {
		color: #ff5252;
		margin-right: 10rpx;
	}

	.history-list {
		max-height: 300rpx;
		overflow-y: auto;
	}

	.history-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1px solid #f5f5f5;
		font-size: 26rpx;
	}

	.history-item:last-child {
		border-bottom: none;
	}

	.history-user {
		color: #333;
		font-weight: 500;
	}

	.history-prize {
		color: #666;
		flex: 1;
		margin: 0 20rpx;
		text-align: center;
	}

	.history-time {
		color: #999;
		font-size: 24rpx;
	}

	.no-history {
		text-align: center;
		color: #999;
		padding: 40rpx 0;
		font-size: 26rpx;
	}
</style>